/*
 * @Author: Zhang Kai
 * @Date: 2022-05-20 10:21:21
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-10 16:08:36
 * @FilePath: /metricsx-standard-ui/src/views/indexManage/frontSettings/components/ColumnInfo/index.tsx
 */
import { defineComponent, reactive, toRaw, watch, ref, onMounted } from 'vue';
import _ from 'lodash';
import './index.scss';
//指标库字段详情业务组件
const ColumnInfo = defineComponent({
  name: 'ColumnInfo',
  props: {
    titles: {
      type: String,
      default: () => '展示筛选条件：'
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  setup: (props, { slots, attrs, emit, expose }: any) => {
    const checkAll = ref(false);

    const checkedCities: any = ref([]);

    const isIndeterminate: any = ref();

    const list: any = ref([]);

    const checkedList: any = ref([]);

    watch(
      () => props?.list,
      () => {
        list.value = _.cloneDeep(props?.list);
        /* 编辑筛选出已选中的项 */
        checkedCities.value = list.value.filter((v: any) => v.isCheck);
        /* 已选列表通过order字段从小到大排序并将已选中的筛选出来 */
        checkedList.value = _.cloneDeep(props?.list)
          .sort((a: any, b: any) => a.order - b.order)
          .filter((v: any, i: number) => {
            return v.order !== -1 && v.isCheck;
          });
        if (checkedCities.value.length) isIndeterminate.value = true;
      },
      {
        immediate: true
      }
    );
    expose({ list: checkedList });

    return () => {
      const { titles } = props;
      return (
        <div class="columns-info-container">
          <div class="title">{titles}</div>
          {/* 全选 */}
          <el-checkbox
            v-model={checkAll.value}
            indeterminate={isIndeterminate.value}
            class="allCheck"
            onChange={(val: boolean) => {
              list.value?.forEach((v: any) => {
                if (!v.disabled) v.isCheck = !!val;
              });
              checkedCities.value = list.value?.filter((v: any) => v.isCheck);
              checkedList.value = list.value?.filter((v: any) => v.isCheck);
              isIndeterminate.value = false;
            }}
          >
            全选
          </el-checkbox>
          {/* 条件项 */}
          <el-checkbox-group
            v-model={checkedCities.value}
            onChange={(val: any) => {
              const checkedCount = val.length;
              checkAll.value = checkedCount === list.value.length;
              isIndeterminate.value =
                checkedCount > 0 && checkedCount < list.value.length;
            }}
          >
            {list.value?.map((v: any) => (
              <div class="check-list-item">
                <el-checkbox
                  disabled={v.disabled}
                  onChange={(e: any) => {
                    v.isCheck = e;
                    const index = checkedList.value.findIndex(
                      (j: any) => j.keys === v.keys
                    );
                    if (index === -1) {
                      checkedList.value.push(v);
                    } else {
                      checkedList.value.splice(index, 1);
                    }
                  }}
                  label={v}
                >
                  {v.label}
                </el-checkbox>
              </div>
            ))}
          </el-checkbox-group>
          {/* 已选顺序 */}
          <div class="selected-list">
            <div class="selected-list-label">已选顺序：</div>
            {checkedList.value?.map((v: any, i: number) => (
              <>
                <div class="selected-list-item">
                  {v.label}
                  <div
                    class="selected-list-del"
                    onClick={() => {
                      checkedCities.value.forEach((j: any, q: number) => {
                        if (v.keys === j.keys) {
                          checkedCities.value.splice(q, 1);
                          checkedList.value.splice(i, 1);
                        }
                      });
                    }}
                  >
                    x
                  </div>
                </div>
              </>
            ))}
          </div>
        </div>
      );
    };
  }
});

export default ColumnInfo;
